﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<header class="header-area inner-page">
    <th:block th:include="commons/front::public-resource">LOGIN</th:block>
    <th:block th:include="commons/front::login-bar">login-bar</th:block>
    <th:block th:include="commons/front::navigation">navigation</th:block>
    <link th:href="@{/public/front/css/page.css}" rel="stylesheet">
    <link th:href="@{/public/front/css/starsame.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/public/front/js/jquery.z-pager.js}"></script>
    <title>明星款</title>
</header>
<body>

<!-- Event Section -->
<section class="classes-section-2">
    <div class="container">
        <div class="row">
            <div id="disconver-container">
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="page text-center">
                    <div id="pager" class="pager clearfix page"></div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- /.event-section -->

<th:block th:include="commons/front::footer">FOOTER</th:block>

<!-- 明星款 -->
<template id="content-template">
    {%each(i,d) list %}
    <!--新的布局 sm-3 改成sm-4  一行三个 未添加弹出框函数 请自行添加-->
    <div class="col-sm-4 col-xs-12 mix kinder play">
        <div class="single-class">
            <div class="ffffelement" onclick="startDetail(${d.id},${d.categoryId})">
                <!--左侧图片-->
                <div class="ffffimagewapper">
                    <!--主图-->
                    <img src="${d.mainImgUrl}">
                </div>
                <div class="ffffproductdescription">
                    <!--此处截取字符串即可 28个长度-->
                    <h4 title="${d.title}">${setTitle(d.title)}</h4>
                    <div class="ffffproductdetail">
                        <div class="ffffproductwrapper">
                            <!--附图-->
                            <img src="${d.subImgUrl}"/>
                        </div>
                        <!--点击查看-->
                        <a href="javascript:void(0);" class="readmore" onclick="startDetail(${d.id},${d.categoryId})">查看更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {%/each%}
</template>

<!-- 推荐 -->
<template id="recommend-template">
    {%each(i,d) list %}
    <div class="col-sm-3">
        <a style="border: solid 1px #6dbfff;" href="${d.url}" target="_blank">
            <img src="${d.subImgUrl}" style=" background-size: 100% auto; object-fit: cover">
        </a>
        <h5 style="word-break: break-all; word-wrap: break-word; line-height: 30px" class="text-center">
            <a href="${d.url}" target="_blank" style="width: 100%;" title="${d.title}" class="text-single-line">
                ${d.title}
            </a>
        </h5>
    </div>
    {%/each%}
</template>

<!--  -->
<div id="detail-container" style="display: none; height: 100%;">
    <form id="detail-form" style="padding-top: 15px; height: 100%;">
        <div class="row col-sm-12" style="height: 100%;">
            <div style="height: 60%;">
                <div class="col-sm-2">
                    <div class="row" style="background-size: 100% auto">
                        <img name="mainImgUrl">
                    </div>
                </div>
                <div class="col-sm-9">
                    <div>
                        <img logo style="max-height: 50px;">
                        <h3 style="font-size: 32px; line-height: 48px; word-break: break-all; word-wrap: break-word" name="title">
                        </h3>
                        <div class="row">
                            <div class="col-sm-9" name="descrption">

                            </div>
                            <div class="col-sm-3">
                                <img style="background-size: 100% auto" name="subImgUrl">
                                <h5 name="subTitle" style="padding-top: 10px"></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <hr>
            <h4 class="text-center" style="margin-bottom: 15px">您可能会喜欢</h4>
            <div class="row col-sm-offset-2 col-sm-9 text-center" style="height: 20%;" id="recommend-container">

            </div>
        </div>
    </form>
</div>

<th:block th:include="commons/front::login">LOGIN</th:block>
<script type="text/javascript" th:src="@{/public/swiper/js/swiper.min.js}"></script>

<script>

    $(function () {

        var pageSize = 10;
        $(document).on("click", "div.pager a", function () {
            var $this = $(this);
            var disabledAttr = $this.attr("disabled");
            if (disabledAttr != "undefined" && disabledAttr == "disabled") {
                return false;
            }

            var targetPage = $this.attr("page-id");
            var cs = $("div.pager span.current");
            var curPage = cs.attr("page-id");
            if (targetPage == curPage) {
                return;
            }

            loadPage(parseInt(targetPage));
        });

        var loadPage = function (page) {
            $.get(ctx + "/front/star_data", {pageNo: page, pageSize: pageSize}, function (rtn) {
                if (rtn && rtn.code != 1) {
                    Alert("获取数据失败");
                    return;
                }
                var list = rtn.data.list;
                if (!list) {
                    return;
                }
                $("#disconver-container").empty();
                $("#content-template").tmpl(rtn.data).appendTo('#disconver-container');

                var totalPage = Math.ceil(rtn.data.total / pageSize); // 总页数
                $("#pager").empty().zPager(
                    {
                        totalData: rtn.data.total, // 总记录数
                        pageData: pageSize, // 每页展示记录数
                        pageCount: totalPage, // 总页码
                        current: page // 当前页码
                    }
                );
            });
        };
        loadPage(1);
    });

    function startDetail(id, categoryId) {
        $.get(ctx + "/front/getStarById", {id: id, categoryId: categoryId}, function (rtn) {
            if (rtn.code != 1) {
                Alert(rtn.message);
                return false;
            }
            var form = $("#detail-form");
            var data = rtn.data.data;
            var properties = Object.getOwnPropertyNames(data);
            for (var i = 0; i < properties.length; i++) {
                form.find("*[name='" + properties[i] + "']").not("img").empty().append(data[properties[i]]);
                form.find("img[name='" + properties[i] + "']").attr("src", data[properties[i]]);
            }
            $("img[logo]").attr("src", ctx + "/public/front/images/home1/logo.png");
            $("#recommend-container").empty();
            $("#recommend-template").tmpl(rtn.data).appendTo('#recommend-container');
            layer.open({
                title: false,
                type: 1,
                area: ['40%', '80%'], //宽高
                shadeClose: true,
                content: $("#detail-container")
            });
            if($("div.layui-layer-shade").length > 1) {
                $("div.layui-layer-shade:last").remove();
            }
        })
    }

    function setTitle(title) {
        return (title && title.length > 28) ? (title.substring(0, 26) + "...") : title;
    }
</script>
</body>
</html>

